import React, { useState, useEffect } from 'react';
import { Table, Button, Pagination, ConfigProvider, Tag } from 'antd';
//导入中文语言包
import zhCN from 'antd/lib/locale/zh_CN';
import { FormOutlined, DeleteFilled } from '@ant-design/icons';
//样式表
import '../css/AfterSalelistbd.css'
import SaleStatusModel from './SaleStatusModel'
import ButtonWarpCpn from '../../../components/CommBtn/CommBtn'
import AccessoryModel from './AccessoryModel'
import DelModel from '../jsx/DelModel'
import Axios from 'axios';
import store from '../../../redux/store'
import axios from 'axios';
import moment from 'moment';

const Aftersalelistbd = () => {


    // 保存当前售后状态的值
    const [saleNowVal, setSaleNowVal] = useState({})
    // 订单状态model框
    const [isSaleStatusModel, setIsSaleStatusModel] = useState(false)
    // 售后状态的弹窗事件
    const changeSaleStatus = (saleVal) => {
        // console.log('orderVal', orderVal)
        setSaleNowVal(saleVal)
        setIsSaleStatusModel(true)
    }
    // 备注显示隐藏model框
    const [remarkState, setRemarkState] = useState(false)
    // 点击备注显示全部
    const isShowRemork = () => {
        setRemarkState(!remarkState)
    }
    const roderOrder = (obj) => {
        return <>
            <span style={{ "marginRight": "5px" }}>备注</span>
            {obj ?
                <ButtonWarpCpn onClick={isShowRemork} size="small" bgcolor="#c9c9c9">已省略</ButtonWarpCpn> :
                <ButtonWarpCpn onClick={isShowRemork} size="small" bgcolor="#52a069">显示全部</ButtonWarpCpn>}
        </>
    }
    const renderRoder = (message, state) => {
        let resRemark = state ? message.substring(0, 5) + '...' : message
        return resRemark
    }
    // 控制附件显示隐藏model框
    const [accessoryState, setAccessoryState] = useState(false)
    // 附件弹窗的事件
    const changeAccessory = (saleVal) => {
        setSaleNowVal(saleVal)
        setAccessoryState(true)
    }
    // 控制删除订单显示隐藏model框
    const [delProduct, setDelProduct] = useState(false)
    // 售后删除
    const changeDelOrder = (saleVal) => {
        setSaleNowVal(saleVal)
        setDelProduct(true)
    }
    // 转换时间戳
    const getDate = (date) => {
        let res = moment(date).format("YYYY-MM-DD")
        return res
    }


    const columns = [
        {
            title: '客户名称',
            dataIndex: 'customerName',
            key: 'customerName',
            align: 'center',
        },
        {
            title: '联系人',
            dataIndex: 'contacts',
            key: 'contacts',
            align: 'center'
        },
        {
            title: '售后状态',
            align: 'center',
            dataIndex: 'state',
            key: 'state',
            render: (saleStatus, record) => {
                // console.log('record',record)
                const temp = saleStatus === 0 ? <Tag onClick={() => { changeSaleStatus(record) }} color="#e0405a">未处理</Tag> :
                    saleStatus === 1 ? <Tag onClick={() => { changeSaleStatus(record) }} color="#33bbee">处理中</Tag> :
                        <Tag onClick={() => { changeSaleStatus(record) }} color="#009966">已完成</Tag>
                return temp
            }
        },
        {
            title: '售后分类',
            align: 'center',
            dataIndex: 'aftersaleTypeId',
            key: 'aftersaleTypeId'
        },
        {
            title: '反馈时间',
            align: 'center',
            dataIndex: 'createDate',
            key: 'createDate',
            render: (createDate) => <>{getDate(createDate)}</>
        },
        {
            title: '相关商品',
            align: 'center',
            dataIndex: 'commodityId',
            key: 'commodityId'
        },
        {
            title: '反馈主题 ',
            align: 'center',
            dataIndex: 'title',
            key: 'title'
        },
        {

            title: roderOrder(remarkState),
            align: 'center',
            dataIndex: 'remark',
            key: 'remark',
            render: (remark) => {
                return renderRoder(remark, remarkState)
            }
        },
        {
            title: '处理时间',
            align: 'center',
            dataIndex: 'processinttime',
            key: 'processinttime'
        },
        {
            title: '处理结果',
            align: 'center',
            dataIndex: 'results',
            key: 'results'
        },
        {
            title: '业务员',
            align: 'center',
            dataIndex: 'employeeId',
            key: 'employeeId'
        },
        // {
        //     title: '附件',
        //     dataIndex: 'accessory',
        //     key: 'accessory',
        //     width: 60,
        //     render: (accessory, record) => {
        //         const temp = accessory.length === 0 ? //报错 找不到accessory
        //             <ButtonWarpCpn onClick={() => { changeAccessory(record) }} size="small" bgcolor="#dddddd">无附件</ButtonWarpCpn> :
        //             <ButtonWarpCpn onClick={() => { changeAccessory(record) }} size="small" bgcolor="#488dc9">附件<span>(1)</span></ButtonWarpCpn>
        //         return temp
        //     }
        // },
        {
            title: '管理',
            key: 'operation',
            align: 'center',
            render: (operation, record) => {
                return (<div ><Button size="small" className='modify-btn' icon={<FormOutlined className='modify-icon' />}>修改</Button>
                    <ButtonWarpCpn onClick={() => { changeDelOrder(record) }} size="small" bgcolor="#ff0000" icon={<DeleteFilled />}>删除</ButtonWarpCpn>
                </div>)
            }
        },
    ];
    // 售后列表数据
    const [saleLists, setSaleLists] = useState([])
    //分页
    const [count, setCount] = useState(null)
    const [nowStatus, setNowStatus] = useState(null)
    const [page, setPage] = useState(1)
    const baseUrl = "http://139.155.237.161:8080"
    useEffect(() => {
        getAll()
   
        let fn = store.subscribe(() => {
            setSaleLists(store.getState().saleReducer.saleLists)
            setCount(store.getState().saleReducer.count)
        })
        return () => {
            fn()
        }
    }, [page, nowStatus, count])


    const getAll = () => {
        axios.get(`${baseUrl}/aftersale/selectAll`)
            .then(res => {
                console.log(res.data)
                if (res.data.code === 200) {
                    const { data } = res.data
                    let newSaleList = data.map((item) => {
                        console.log('data', data)
                        item['key'] = item.id
                        return item
                    })
                    console.log('newSaleList', newSaleList)
                    setSaleLists(newSaleList)
                } else {
                    setSaleLists([])
                }
            }).catch(err => {
                console.log(err)
            })

    }
    const delet = (data) => {
        const id = data.id
        axios.post(`${baseUrl}/aftersale/deleteById?${id}`)
            .then(res => {
                axios.get(`${baseUrl}/aftersale/selectAll`)
                if (res.data.code === 200) {
                    const { data } = res.data
                    let delProduct = data.map((item) => {
                        item['key'] = item.id
                        return item
                    })
                    console.log('delProduct', delProduct)
                    setDelProduct(delProduct)

                }
            }).catch(err => {
                console.log(err)
            })

    }
    

    // {
    //     key: '1',
    //     name: '星河入梦',
    //     age: '王五',
    //     saleStatus: 1, //0 未处理 1 处理中 2 已完成
    //     classification: '操作问题',
    //     time: '2022-03-31 00:00',
    //     commodity: '王者[订单：DD2022033023050]',
    //     theme: '123',
    //     remark: '21435465668786',
    //     addressprocessingtime: '2022-03-31 00:00',
    //     results: '',
    //     salesman: '超级管理员',
    //     accessory: '无附件',
    //     address: '1',
    // },
    // {
    //     key: '2',
    //     name: '星河入梦',
    //     age: '王五',
    //     saleStatus: 0,
    //     classification: '操作问题',
    //     time: '2022-03-31 00:00',
    //     commodity: '王者[订单：DD2022033023050]',
    //     theme: '123',
    //     remark: '32457655753231212',
    //     addressprocessingtime: '2022-03-31 00:00',
    //     results: '',
    //     salesman: '超级管理员',
    //     accessory: '无附件',
    //     address: '1',
    // },



    return (
        <div className='body-style'>
            {/* 售后状态弹出层 */}
            <SaleStatusModel nowStatus={saleNowVal} isShow={isSaleStatusModel} pHandleOk={(res) => { setIsSaleStatusModel(res) }}
                pHandleCancel={(res) => { setIsSaleStatusModel(res) }}></SaleStatusModel>
            {/* 附件弹出层 */}
            <AccessoryModel nowStatus={saleNowVal} isShow={accessoryState} pHandleOk={(res) => { setAccessoryState(res) }}
                pHandleCancel={(res) => { setAccessoryState(res) }}></AccessoryModel>
            {/* 订单删除弹出层 */}
            <DelModel orderId={saleNowVal.key} isShow={delProduct} pHandleOk={(res) => { setDelProduct(res) }}
                pHandleCancel={(res) => { setDelProduct(res) }}></DelModel>
            <Table pagination={false} bordered columns={columns} scroll={{ x: 1300 }} dataSource={saleLists} />
            <ConfigProvider locale={zhCN} className='page'>
                <Pagination
                    total={60}
                    pageSize={5}
                    showSizeChanger
                    showQuickJumper
                    style={{ textAline: 'center' }}
                    showTotal={total => `共 ${total} 条`}
                />
            </ConfigProvider>
        </div>
    );
}

export default Aftersalelistbd;
